<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../assets/css/layui.css">
    <link rel="stylesheet" href="../assets/css/view.css"/>
    <link rel="icon" href="/favicon.ico">
    <title>管理后台</title>
</head>
<body class="layui-view-body">
<div class="layui-content" id="contract_vue">
    <div class="layui-page-header">
        <div class="pagewrap">
                <span class="layui-breadcrumb">
                  <a href="">合同发票管理</a>
                  <a><cite>合同管理</cite></a>
                </span>
            <h2 class="title">合同管理</h2>
        </div>
    </div>
    <div class="layui-row">
        <div class="layui-card">
            <div class="layui-card-body">
                <div class="form-box">
                    <div class="layui-form layui-form-item">
                        <div class="layui-inline">
                            <div class="layui-form-mid">ID:</div>
                            <div class="layui-input-inline" style="width: 100px;">
                                <input type="text" id="contract_id" autocomplete="off" class="layui-input">
                            </div>

                            <div class="layui-form-mid">合同名称:</div>
                            <div class="layui-input-inline" style="width: 100px;">
                                <input type="text" id="contract_name" autocomplete="off" class="layui-input">
                            </div>

                            <div class="layui-form-mid">业务线名称:</div>
                            <div class="layui-input-inline" style="width: 100px;">
                                <input type="text" id="businessLine_name" autocomplete="off" class="layui-input">
                            </div>

                            <div class="layui-form-mid">甲方:</div>
                            <div class="layui-input-inline" style="width: 100px;">
                                <input type="text" id="first_party" autocomplete="off" class="layui-input">
                            </div>

                            <div class="layui-form-mid">乙方:</div>
                            <div class="layui-input-inline" style="width: 100px;">
                                <input type="text" id="second_party" autocomplete="off" class="layui-input">
                            </div>

                            <button class="layui-btn layui-btn-blue" v-on:click="select()">查询</button>

                            <button class="layui-btn layui-btn-blue" v-on:click="add()">新增</button>
                        </div>
                    </div>
                    <table id="all_contract" border="1">
                        <tr>
                            <td height="50" width="100" align="center">  ID  </td>
                            <td height="50" width="100" align="center">合同名称</td>
                            <td height="50" width="100" align="center">合同类型</td>
                            <td height="50" width="100" align="center">合同方向</td>
                            <td height="50" width="100" align="center">合同状态</td>
                            <td height="50" width="100" align="center">业务线名称</td>
                            <td height="50" width="100" align="center">  甲方 </td>
                            <td height="50" width="100" align="center">  乙方  </td>
                            <td height="50" width="100" align="center">创建时间</td>
                            <td height="50" width="100" align="center"> 创建人 </td>
                            <td height="50" width="100" align="center"> 更新人 </td>
                            <td height="50" width="100" align="center">  版本 </td>
                        </tr>
                        <tr v-for="c in allContract" style="color: black" v-on:dblclick="compile(c.id)">
                            <td height="50" width="100" v-text="c.id" align="center"></td>
                            <td height="50" width="100" v-text="c.contractName" align="center"></td>
                            <td height="50" width="100" v-text="c.contractTypeName" align="center"></td>
                            <td height="50" width="100" v-text="c.contractDirectionName" align="center"></td>
                            <td height="50" width="100" v-text="c.contractStageName" align="center"></td>
                            <td height="50" width="100" v-text="c.businessLineName" align="center"></td>
                            <td height="50" width="100" v-text="c.firstParty" align="center"></td>
                            <td height="50" width="100" v-text="c.secondParty" align="center"></td>
                            <td height="50" width="100" v-text="c.createTime" align="center"></td>
                            <td height="50" width="100" v-text="c.creatorName" align="center"></td>
                            <td height="50" width="100" v-text="c.updaterName" align="center"></td>
                            <td height="50" width="100" v-text="c.versionNumber" align="center"></td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script src="../assets/layui.all.js"></script>
<script src="../assets/lay/modules/layer.js"></script>
<script src="../js/jquery.3.2.1.min.js"></script>
<script src="../js/vue.dev.js"></script>
<script>

    var v = new Vue({
        el: "#contract_vue",
        data:{
            allContract:[{
                "id":1,
                "contractName":"合同"
            }]
        },
        created: function (){
            var self = this;
            $.ajax({
               url: "http://localhost:8085/contract/contract/get/all",
               type: "GET",
               dataType: "json",
               success: function (data){
                   self.allContract = data.result;
               },
                error: function () {
                    //alert("请刷新");
                }
            });
        },
        methods:{
            compile: function (id){
                //根据id编辑
                localStorage.setItem("compile_contract_id",id)
                layer.open({
                    type : 2 ,
                    title : "修改合同" ,
                    shadeClose : true ,
                    area : ["800px","400px"] ,
                    content : "compile_contract.html"
                });
            },
            select: function (){
                var contract_id = document.getElementById("contract_id").value;
                var contract_name = document.getElementById("contract_name").value;
                var businessLine_name = document.getElementById("businessLine_name").value;
                var first_party = document.getElementById("first_party").value;
                var second_party = document.getElementById("second_party").value;
                console.log(contract_id,contract_name,businessLine_name,first_party,second_party);
            },
            add: function (){
                layer.open({
                    type : 2 ,
                    title : "新增合同" ,
                    shadeClose : true ,
                    area : ["340px" , "400px"] ,
                    content : "add_contract.html"
                });
            }
        }
    });
</script>
</html>